<template>
  <div>
      <div class="top">
          <span></span>
          <p>蓝牙耳机</p>
          <span></span>
      </div>
      <div class="title">
          <ul>
              <li>综合</li>
              <li>销量</li>
              <li>价格</li>
              <li>筛选</li>
          </ul>
          <ul>
              <li>全部</li>
              <li>入耳式</li>
              <li>漫步者</li>
              <li>华为</li>
              <li>联想</li>
          </ul>
          <p><span>优先展示百亿补贴商品</span></p>
      </div>
      <main>
          <ul>
              <li v-for="(v,i) in arr" :key="i" @click="toGo(v)">
                  <img :src="v.img">
                  <h4>{{v.name}}</h4>
                  <p>{{v.info}}</p>
                  <p><b>${{v.price}}</b><i>已拼{{v.num}}件</i></p>
              </li>
          </ul>
      </main>


  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[{img:"/type/1.png",name:"[蓝牙耳机]无线52蓝牙耳",info:"24小时发货 退换包运费",price:29.9,num:"10万+",goodsId:1},
            {img:"/type/1.png",name:"[蓝牙耳机]无线52蓝牙耳",info:"24小时发货 退换包运费",price:29.9,num:"10万+",goodsId:2},
            {img:"/type/1.png",name:"[蓝牙耳机]无线52蓝牙耳",info:"24小时发货 退换包运费",price:29.9,num:"10万+",goodsId:3},
            {img:"/type/1.png",name:"[蓝牙耳机]无线52蓝牙耳",info:"24小时发货 退换包运费",price:29.9,num:"10万+",goodsId:4},
            {img:"/type/1.png",name:"[蓝牙耳机]无线52蓝牙耳",info:"24小时发货 退换包运费",price:29.9,num:"10万+",goodsId:5},
            {img:"/type/1.png",name:"[蓝牙耳机]无线52蓝牙耳",info:"24小时发货 退换包运费",price:29.9,num:"10万+",goodsId:6},]
        }
    },
    methods: {
        toGo(v){
            this.$router.push({path:'/goodsinfo',query:{goodsId:v.goodsId}});
        }
    },
}
</script>

<style scoped>
    .top{
        width:100%;
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.18rem;
        font-weight: bold;
    }
    .title{
        padding:0 0.1rem;
    }
    .title ul:first-child{
        display: flex;
        justify-content: space-around;
        align-items: center;
        line-height: 0.4rem;
        border-bottom: 0.01rem solid #f4f4f4;
    }
    .title ul:last-of-type{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 0.4rem;
        margin:0.05rem 0;
        padding-bottom:0.05rem;
        border-bottom: 0.01rem solid #f4f4f4;
    }
    .title ul:last-of-type li{
        height: 0.3rem;
        background-color: #f4f4f4;
        padding:0.05rem 0.1rem;
        border-radius: 0.1rem;
        line-height: 0.3rem;
    }
    .title p{
        height: 0.5rem;
        width:100%;
        background-color: #f6f4f5;
        display: flex;
        align-items: center;
        margin-top:0.1rem;
    }
    .title p span{
        width:80%;
        height: 80%;
        display: block;
        margin: auto;
        text-align: center;
        line-height: 3;
        font-size: 0.14rem;
        border: 0.01rem solid #c45a6c;
        color: #c45a6c;
        border-radius: 0.05rem;
    }
    main{
        width:100%;
        margin-top:0.1rem;
    }
    main ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    main ul li{
        width:48%;
    }
    main ul li  img{
        width:100%;
    }
    main ul li h4{
        font-size: 0.16rem;
        text-indent: 0.1rem;
    }
    main ul li p{
        text-indent: 0.1rem;
        margin:0.05rem 0;
    }
    main ul li p:first-of-type{
        color:#d9d9d9;
    }
    main ul li p:last-of-type{
        margin-bottom:0.08rem;
    }
    main ul li p:last-of-type b{
        color:#ce5251;
        font-size: 0.18rem;
        margin-right:0.05rem;
    }
    main ul li p:last-of-type i{
        color:#a3a3a3;
        font-size: 0.14rem;
    }
</style>